<template>
   <div>
   	    <div class="dynamicNav">
			<DynamicNav :navTitle="navTitle"/>
		</div>
		<router-link to="dynamicState">
			<img class="leftArrow" src="../../../assets/images/dynamicState/37/f-1.png" alt="" />
		</router-link>
   	     <div class="commentNav">
   	     	<div @click="clickLeft">
   	     		<img :src="commentImg.mine.afterImg" alt="" v-if="changeComment"/>
   	     		<img :src="commentImg.mine.beforeImg" alt="" v-else/>
   	     	    <span :class="{changColorLeft:!changeComment}">我的评论</span>
   	     	</div>
   	     	<div @click="clickRight">
   	     		<img :src="commentImg.your.beforeImg" alt="" v-if="changeComment"/>
   	     		<img :src="commentImg.your.afterImg" alt="" v-else/>
        	    <span :class="{changColorRight:!changeComment}">评论我的</span>
   	     	</div>	
   	     </div>
   	     
   	     <div class='commentBody' v-for="(item,index) in commentData" :key="index">
   	     	<div class="heaPortrait">
   	     		<img :src="item.comment.bgPicture" alt="" />
   	     	</div>
   	     	<div class="commentReply">
     			<img :src="bgPicture" alt="" />
     			<div class="chitchat">
     				<p>{{item.comment.myName}}</p>
     				<p>{{item.comment.commentDate}}</p>
     				<p>{{item.comment.myContent}}</p>
     			</div>
     			<div class='chitchatBottom'>
     				<span>
     					<b>{{item.comment.yourName}}:</b>
     					{{item.comment.yourContent}}
     				</span>
     			</div>	
   	     	</div>
   	     </div>
   	
   </div>
</template>

<script>
	import DynamicNav from '../dynamicPublic/dynamicNav'
	export default {
		name:"dynaComment",
		data(){
			return{
				navTitle:"评论",
				changeComment:true,
				condition:"left",
				commentImg:{
					mine:{
						beforeImg:require("../../../assets/images/dynamicState/37/1-1.png"),
						afterImg:require("../../../assets/images/dynamicState/37/1-2.png")
					},
					your:{
						beforeImg:require("../../../assets/images/dynamicState/37/2-1.png"),
						afterImg:require("../../../assets/images/dynamicState/37/2-2.png")
					}
				},
				commentData:[],
				bgPicture:require("../../../assets/images/dynamicState/37/comment.png")
				
				
			}
		},
		components:{
		  DynamicNav
		},

        created(){
        	this.getData();
        },
		methods:{
			getData(){
				this.$axios.get("http://localhost:3000/commentData")
	        	.then(res => {
	        		this.commentData = res.data.commentData;
	        	})
	        	.catch(error => {
	        		console.log(error);
	        	})
			},
			clickLeft(){
				if(this.condition == "right"){
					this.getData()
				}
				this.condition = "left";
				if(this.condition == "left"){
					this.changeComment = true
				}
				
			},
			clickRight(){
				if(this.condition == "left"){
					this.getData()
				}
				this.condition = "right";
				if(this.condition == "right"){
					this.changeComment = false;
				}
			}
			
		}
		
	}
</script>

<style scoped lang="less">

  @current:100rem;
  .dynamicNav{
  	height:88/@current;
  }
 .leftArrow{
 	position:fixed;
 	top:26/@current;
 	left:40/@current;
 	z-index:333;
 	width:22/@current;
 }
.commentNav{
	position:relative;
	height:60/@current;
	margin-top:30/@current;
	 div{
	 	width:300/@current;
	 	height:60/@current;
	 	img{
	 		position:absolute;
	 		height:60/@current;
	 	}
	 	span{
			font-size:32/@current;
			color:#f2eef9;
			position:absolute;
			top:10/@current;
			text-align: center;
			display:inline-block;
			width:300/@current;
		}
	 }
	 div:first-of-type{
	 	position:absolute;
	 	left:30/@current;
	 }
	 div:last-of-type{
	 	position:absolute;
	 	right:30/@current;
	 	span{
			position:absolute;
			color:#A54BE8;	
		}
		.changColorRight{
		 	color:#f2eef9;
		 }
	 }
	 .changColorLeft{
	 	color:#A54BE8;	
	 } 
}

.commentBody {
	height:260/@current;
	width:100%;
	margin-top:30/@current;
	overflow:hidden;
	.heaPortrait{
		float:left;
		position:relative;
		margin-left:20/@current;
		img{
			width:80/@current;
			height:80/@current;
			border-radius: 50%;
			position:absolute;
			top:0
		}
	}
	.commentReply{
		float:right;
		margin-right:20/@current;
		width:500/@current;
		position:relative;
		
		img{
			width:500/@current;
		}
		
		.chitchat{
			position:absolute;
			top:20/@current;
			left:35/@current;
			right:20/@current;
			width:100%;
			p{
			   font-size:28/@current;
			   
			}
			p:first-of-type{
				position:absolute;
				color:#000000;
			}
			p:nth-of-type(2){
				font-size:24/@current;
				position:absolute;
				right:40/@current;
				color:#959595;
			}
			P:last-of-type{
		        margin-top:50/@current;
				color:#535353;
				font-size:32/@current;
			}
		}
		.chitchatBottom{
			span{
				font-size:28/@current;
				position:absolute;
				top:150/@current;
				width:500/@current;
				color:#313131;
				padding-bottom: 22/@current;
				border-bottom: 1/@current solid #cfcdd3;
				b{
					font-size:28/@current;
					color:#A54BE8;
					font-weight: 400;
				}
			}
		}
		
	}
}

</style>